<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
	 <meta charset="UTF-8">
	 <title th:replace="common/base::pagetitle"></title>
	 <link th:replace="common/base::static"/>
	 <style type="text/css">
		  .box{float: left;list-style: none; width: 120px;}
		  .box img{
				width: 100%;
		  }
	 </style>
</head>
<body>
<div class="layui-form" style="padding: 20px 30px 0 0;">
	 <div class="layui-form-item">
		  <label class="layui-form-label">印章类型</label>
		  <div class="layui-input-inline">
				<select name="sealType" lay-filter="kFormSealType" id="kFormSealType">
					 <option value="">--请选择--</option>
					 <option value="1">图片印章</option>
					 <option value="2">模板印章</option>
				</select>
		  </div>
	 </div>
	 <div class="layui-form-item">
		  <label class="layui-form-label">签章账号</label>
		  <div class="layui-input-inline">
				<input type="text" th:value="${editInfo.accountId}" lay-verify="required" placeholder="印章别名" disabled autocomplete="off" class="layui-input">
		  </div>
	 </div>
	 <span id="sealType_1" style="display: none">
		  <div class="layui-form-item">
				<label class="layui-form-label">印章别名</label>
				<div class="layui-input-inline">
					 <input type="text" name="alias" placeholder="印章别名" autocomplete="off" class="layui-input">
				</div>
				
		  </div>
		  <div class="layui-form-item">
				<label class="layui-form-label">印章图片</label>
				<div class="layui-input-inline">
					 <button type="button" class="layui-btn layui-btn-danger" id="sealImg"><i class="layui-icon"></i>上传图片</button>
					 <img class="layui-upload-img" id="photo" width="100" height="100">
					 <input type="hidden" id="base64" name="base64"  placeholder="印章图片" autocomplete="off" class="layui-input">
				</div>
				
		  </div>
	 </span>
	 <span id="sealType_2" style="display: none">
		  <div class="layui-form-item">
				<label class="layui-form-label">印章别名</label>
				<div class="layui-input-inline">
					 <input type="text" name="alias" placeholder="印章别名" autocomplete="off" class="layui-input">
				</div>
		  </div>
		  <div class="layui-form-item">
				<label class="layui-form-label">印章颜色</label>
				<div class="layui-input-inline">
				  <select name="color">
						  <option value="RED">红色</option>
						  <option value="BLUE">蓝色</option>
						  <option value="BLACK">黑色</option>
					</select>
				</div>
		  </div>
		  <div class="layui-form-item">
				<label class="layui-form-label">横向文字</label>
				<div class="layui-input-inline">
					 <input type="text" name="htext" placeholder="横向文字" autocomplete="off" class="layui-input">
				</div>
		  </div>
		  <div class="layui-form-item">
				<label class="layui-form-label">下弦文字</label>
				<div class="layui-input-inline">
					 <input type="text" name="qtext" placeholder="下弦文字" autocomplete="off" class="layui-input">
				</div>
		  </div>
		   <div class="layui-form-item">
				<label class="layui-form-label">模板类型</label>
				<div class="layui-input-inline">
				  <select name="type">
						  <option value="TEMPLATE_ROUND">圆章</option>
						  <option value="TEMPLATE_OVAL">椭圆章</option>
					</select>
				</div>
		  </div>
		  <div class="layui-form-item">
				<label class="layui-form-label">中心图案</label>
				<div class="layui-input-inline">
				  <select name="central">
						  <option value="STAR">圆形有五角星</option>
						  <option value="NONE">圆形无五角星</option>
					</select>
				</div>
		  </div>
	 </span>
	 <div class="layui-form-item layui-hide">
		  <input type="button" lay-submit="" lay-filter="kFormSubmit" id="kFormSubmit" value="确认添加">
		  <input type="text" name="accountId" th:value="${editInfo.accountId}" placeholder="保存ID" autocomplete="off" class="layui-input">
		  <!--        <input type="text" name="deptId" th:value="${editInfo.deptId}" placeholder="保存deptId" autocomplete="off" class="layui-input">-->
	 </div>
</div>

<script th:replace="common/base::context"></script>
<script th:replace="common/base::mainjs"></script>
<script th:src="@{/static/js/select-tree.js}"></script>
<script>
    layui.use(['form','upload'], function () {
        var $ = layui.$, form = layui.form, upload = layui.upload;
		 //设定文件大小限制
        upload.render({
            elem: '#sealImg'
				,url: BASE_WEB + 'seals/getBase64'
            ,size: 60 //限制文件大小，单位 KB
            ,exts: 'png' //只允许上传png图片
            //,auto: false        /*true为选中图片直接提交，false为不提交根据bindAction属性上的id提交*/
            //,bindAction: '#kFormSubmit'
            ,choose:function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#photo').attr('src', result); //图片链接（base64）
                });
            }
            ,done: function(r){
                console.log(r);
                if (r.code === req.status.ok) {
                    $("#base64").val(r.data);
					 }else{
                    wlbKit.errorMsg(r.msg);
					 }
            }
        });

        form.on('select(kFormSealType)', function (data) {  //kFormSealType为lay-filter的属性值
            console.log(data.value)
            if (data.value === "1") {
                $("#sealType_1").show();
                $("#sealType_2").hide();
            } else if(data.value === "2") {
                $("#sealType_1").hide();
                $("#sealType_2").show();
            }else {
                $("#sealType_1").hide();
                $("#sealType_2").hide();
            }

        });
        
        //监听提交
        form.on('submit(kFormSubmit)', function (data) {
            var field = data.field; //获取提交的字段
            var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
            /*if (deptId) {
                field.deptId = deptId;
            }*/
				if(field.sealType == ""){
				    wlbKit.errorMsg("请选择印章类型！");
				    return false;
				}
            log('field=', field);

            //提交 Ajax 成功后，关闭当前弹层并重载表格
            $.ajax({
                type: req.type.post,
                url: BASE_WEB + 'seals/official/edit',
                data: field,
                async: false,
                success: function (r) {
                    if (r.code === req.status.ok) {
                        parent.layui.table.reload('kContentTable'); //重载表格
                        parent.layer.close(index); //再执行关闭
                    } else {
                        wlbKit.errorMsg(r.msg);
                    }
                }
            });

        });
    })
</script>
</body>
</html>
